<script lang="ts" setup>
//可以优化数字滚动效果
import MoCountTo from '@/components/MoCountTo.vue'
import { ref, onMounted, setBlockTracking } from 'vue'
import Panel from '@/components/panel.vue'
const show = ref(false)
const detailBox = ref()
//鼠标移入
const mouseEnter = () => {
  console.log('鼠标移入')
  detailBox.value.style.opacity = 1
}
//鼠标移除
const mouseLeave = () => {
  detailBox.value.style.opacity = 0
}
onMounted(() => {
  show.value = true
})
</script>
<template>
  <div class="container">
    <!-- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 700 700"> -->
    <!-- <foreignObject class="text" x="0" y="0" ref="textBox" width="700" height="700"> -->
    <!-- <div class="text-box" xmlns="http://www.w3.org/1999/xhtml">
          <img src="../assets/img/industry.png" alt="" />
        </div> -->

    <!-- </foreignObject> -->
    <!-- </svg> -->

    <!-- <transition
      enter-active-class="animate__animated animate__slideInDown"
      leave-active-class="animate__animated animate__backInRight"
    > -->
    <div class="centre" v-show="show"></div>
    <!-- </transition> -->

    <div class="little-box" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
      <img class="icon" src="@/assets/icon/产品.svg" alt="产品" />
      <div class="little-box-main">
        <div class="little-box-title">小标题</div>
        <div class="num"><MoCountTo :num="142"></MoCountTo></div>
      </div>
    </div>
    <!-- <div class="path"></div> -->
    <div class="little-box" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
      <img class="icon" src="@/assets/icon/产品.svg" alt="产品" />
      <div class="little-box-main">
        <div class="little-box-title">小标题</div>
        <div class="num"><MoCountTo :num="11232"></MoCountTo></div>
      </div>
    </div>
    <div class="little-box" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
      <img class="icon" src="@/assets/icon/产品.svg" alt="产品" />
      <div class="little-box-main">
        <div class="little-box-title">小标题</div>
        <div class="num"><MoCountTo :num="141232"></MoCountTo></div>
      </div>
    </div>
  </div>
  <div class="detail-box" ref="detailBox"></div>
  <!-- <Panel class="detail-box" ref="detailBox"></Panel> -->
  <div class="bottom-img"></div>
  <div class="bottom-img2"></div>
</template>
<style scoped lang="scss">
.num {
  font-size: larger;
  font-weight: bolder;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  // background-color: black;
  display: flex;
  justify-content: center;
  //   background-color: aqua;
}
img {
  width: 100px;
  height: 100px;
}
.centre {
  // &:hover {
  //   animation: pulse;
  //   animation-duration: 1s;
  // }
  background-image: url('../assets/img/center1.png');
  background-size: cover;
  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%, -50%);
  z-index: 1;

  position: absolute;
  width: vw(500);
  height: vw(500);
  animation: bounceInDown;
  animation-duration: 1.5s;
}

.centre::after {
  content: ' ';
  background-image: url('../assets/img/center2.png');
  background-size: cover;

  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%, -50%);
  z-index: 1.5;

  position: absolute;
  width: vw(500);
  height: vw(500);
  animation: bounceInDown;
  animation-duration: 2s;
}
.centre::before {
  content: ' ';
  background-image: url('../assets/img/center3.png');
  background-size: cover;

  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%, -50%);
  z-index: 1;

  position: absolute;
  width: vw(500);
  height: vw(500);
  animation: bounceInDown;
  animation-duration: 3s;
}

.little-box {
  z-index: 1000;
  &:hover {
    animation: bounce;
    animation-duration: 1s;
  }
  position: absolute;
  width: vw(120);
  min-height: vw(40);
  background-color: rgba(78, 122, 255, 0.466);
  // border: 2px solid rgba(255, 255, 255, 0.214);
  box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.314);
  display: flex;
  border-radius: 10px;
  .icon {
    width: vw(33);
    height: vw(33);
    margin: auto 0;
    margin-left: vw(5);
  }
  .little-box-main {
    margin-left: vw(13);
    text-align: center;
    display: flex;
    flex-direction: column;
    font-size: vw(15);
  }
}

.little-box:nth-child(3) {
  top: 75%;
  left: -10%;
}
.little-box:nth-child(2) {
  top: 50%;
  right: -20%;
}
.detail-box {
  width: vw(250);
  height: vw(150);
  background-color: #e3effb;
  position: relative;
  left: 50%;
  top: -20%;
  border: 5px solid #3e90ff;
  box-shadow: 0px 0px 8px #cae0ffb8;
  border-radius: 15px;
  z-index: 200;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 2s;
}
.bottom-img {
  width: vw(350);
  height: vw(350);
  position: relative;
  margin: auto;
  margin-top: vh(-355);
  background-image: url('@/assets/img/circle1.png');
  background-size: cover;
  animation: spin 7s linear infinite;
}
.bottom-img2 {
  width: vw(250);
  height: vw(250);
  position: relative;
  margin: auto;
  margin-top: vh(-350);
  background-image: url('@/assets/img/circle2.png');
  background-size: cover;
  animation: spin 7s linear infinite;
}
.path {
  width: 100%;
  height: 100%;

  background-color: rgb(0, 183, 255);
  animation: draw_line1 2s linear;
  -webkit-animation: draw_line1 2s linear;
  clip-path: polygon(50% 10%, 51% 10%, 51% 70%, 50% 70%);
  //   color: aliceblue;
}
@keyframes spin {
  from {
    transform: rotateX(56deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(56deg) rotateZ(360deg);
  }
}
@keyframes draw_line1 {
  0% {
    clip-path: polygon(50% 10%, 51% 10%, 51% 0%, 50% 0%);
  }
  100% {
    clip-path: polygon(50% 10%, 51% 10%, 51% 70%, 50% 70%);
  }
}
</style>
